<template>
	<div class="case-box">
		<img class="case-banner" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-17/63eee188a54f2eb4a1a6a0f9.png" />
		<div class="case-box_koc">
			<div class="home-gp1_xlist">
				<div class="home-gp1_xhl" @click="$router.push('/web/standard/case/details?id='+xItem._id+'&tableName=caselist')" v-for="(xItem,xIndex) in viewModel" :key="xIndex" :style="{width: (91/3)+'vw'}">
					<div class="home-gp1_xconter">
						<img class="home-gp1_xig1" :src="$ala.urlImage(xItem.image)" />
						<div class="home-gp1_mebox"></div>
						<div class="home-gp1_mtk1">{{ xItem.name }}</div>
					</div>
					<div class="home-gp1_xig2">{{ xItem.name }}</div>
					<div class="home-gp1_xig3">{{ xItem.subhead }} </div>
					<div class="home-gp1_xig4">{{ xItem.intro }}</div>
				</div>
			</div>
			<div class="home-gp1_but" @click="knowTab">了解更多 ></div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: [],
				paraModel: {
					pageIndex: 1,
					pageCount: 1,
					pageSize: 15
				}
			}
		},
		mounted() {
			this.init()
			this.$bus.$on('standard_init_change', () => {
				this.init()
			})
		},
		methods: {
			async init() {
				var repones = await this.$ala.httpGet('Api/Auto/Table', {
					pageIndex: this.paraModel.pageIndex,
					pageSize: this.paraModel.pageSize,
					type: 'LightAppcaselist',
					TableName: 'caselist'
				})
				this.paraModel.pageIndex = repones.result.pageIndex
				this.paraModel.pageCount = repones.result.pageCount
				if (repones.result.pageIndex === 1) {
					this.viewModel = repones.result.result
				} else {
					this.viewModel = [...this.viewModel, ...repones.result.result]
				}
			},
			knowTab() {
				if (this.paraModel.pageCount > this.paraModel.pageIndex) {
					this.paraModel.pageIndex++
					this.init()
				}
			}
		}
	}
</script>
<style lang="scss">
	.case-box {
		.case-banner {
			width: 92vw;
			display: block;
			margin: auto;
		}

		.case-box_koc {
			width: 92vw;
			margin: auto;
			padding-bottom: 60px;
		}

		.home-gp1_but {
			width: 12vw;
			height: 2.1vw;
			line-height: 2.1vw;
			text-align: center;
			font-size: 0.86vw;
			color: #333333;
			border: 1px solid #999999;
			display: block;
			margin: 10px auto;
			cursor: pointer;
		}

		.home-gp1_xlist {
			display: flex;
			flex-wrap: wrap;
			margin-top: 15px;
			box-sizing: border-box;

			.home-gp1_xhl {
				margin-left: 0.5vw;
				margin-top: 1.74vw;
				margin-bottom: 1vw;
				cursor: pointer;

				.home-gp1_xconter {
					width: 100%;
					height: 21.57vw;
					overflow: hidden;
					position: relative;
				}

				.home-gp1_xig1 {
					width: 100%;
					height: 21.57vw;
					transition: .5s transform;
				}

				.home-gp1_mebox {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0);
					transition: 0.6s ease;
				}

				.home-gp1_mtk1 {
					width: 100%;
					text-align: center;
					color: #fff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 1.2vw;
					position: absolute;
					top: 0;
					opacity: 0;
					transition: 0.6s ease;
					padding: 0 1.5vw;
				}

				.home-gp1_mtk2 {
					font-size: 1.05vw;
					width: 100%;
					text-align: center;
					color: #fff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					position: absolute;
					bottom: 0;
					transition: 0.6s ease;
					opacity: 0;
				}

				.home-gp1_xig2 {
					font-size: 1.3vw;
					color: #000000;
					margin-top: 10px;
				}

				.home-gp1_xig3 {
					font-size: 1.11vw;
					color: rgba(#000, 0.9);
					margin-top: 10px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.home-gp1_xig4 {
					font-size: 0.8vw;
					color: rgba(#000, 0.9);
					margin-top: 1vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&:hover {
					.home-gp1_xig1 {
						transform: scale(1.2);
					}

					.home-gp1_mebox {
						background-color: rgba(0, 0, 0, 0.5);
					}

					.home-gp1_mtk1 {
						top: 10vw;
						opacity: 1;
					}

					.home-gp1_mtk2 {
						bottom: 9.5vw;
						opacity: 1;
					}
				}
			}

			.home-gp1_xhl:nth-child(3n+1) {
				margin-left: 0;
			}
		}
	}
</style>